<template>
  
  <el-container  class ="layout-container-demo">
    
        <el-header style="text-align: right; font-size: 12px">
          <el-row :gutter="30">
           <el-col :span="4" @click="changeCollapse"  >
             <el-image style="width: auto;" :src="logourl" :fit="fit" class="titleImage" /> <!-- 图片 -->
          </el-col>
           <el-col :span="18" style="text-align: center;font-size: 20px">
              <div class="toolbar" >
                
                <img src="../assets/app2.png" alt="App Logo" style="width: 40px; height: 40px; margin-left: 0px;">
                <span>安心宠必达</span>
              </div>
           </el-col>
           <!-- <el-col :span="2">
              <div class="toolbar">
              <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 1px">
                <setting />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  
                  <el-dropdown-item>添加摄像头</el-dropdown-item>
                  <el-dropdown-item>删除摄像头</el-dropdown-item>
                  <el-dropdown-item>个人设置</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>xiaoao</span>
             </div>
          </el-col> -->
         </el-row>
         

      </el-header>


  <el-container>
        <!-- <el-aside :width="isCollapse"> -->
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :value="false">expand</el-radio-button>
    <el-radio-button :value="true">collapse</el-radio-button>
  </el-radio-group> -->
      <!-- <el-scrollbar> -->
        <el-menu 
          default-active="1"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose">
            <el-menu-item index="1" @click="setActiveComponent('MJPEGPlayer')" >
              <el-icon ><icon-menu  /></el-icon>
              <span>监控页面</span>
            </el-menu-item>
            <el-menu-item index="2" @click="setActiveComponent('HlsPlayer')">
              <el-icon><Clock /></el-icon>
              <span>回放</span>
           </el-menu-item>
            <el-menu-item index="3" @click="setActiveComponent('Information')">
              <el-icon><Warning /></el-icon>
              <span>异常记录</span>
            </el-menu-item>

        </el-menu>
      <!-- </el-scrollbar> -->
      
    <!-- </el-aside> -->
    <el-main>
      <el-scrollbar>
  
        <!-- <div style="display: flex;">
          <div style="position: absolute; top: 0; left: 0;">
            <MJPEGPlayer  />
          </div>
        </div> -->
        <component :is="activeComponent" />
       </el-scrollbar>
    </el-main>
  </el-container>
    
  </el-container>
</template>

<script lang="ts" setup >

import { ref } from 'vue'
import { Clock, Menu as IconMenu, Message, Setting, Warning } from '@element-plus/icons-vue'
import HlsPlayer from './HlsPlayer.vue'
import MJPEGPlayer from './MJPEGPlayer.vue';
import Information from './Information.vue'

const logourl='src/img/logo.png'
const isCollapse = ref(true)

function changeCollapse(){
  if(isCollapse.value){
    isCollapse.value = false
  }else{
    isCollapse.value = true
}
  console.log(isCollapse.value)
}

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

</script>

<script lang="ts">


export default {
  components: {
    MJPEGPlayer,
    HlsPlayer,
    Information,
  },
  data() {
    return {
      activeComponent: 'MJPEGPlayer', // 默认显示组件1
    };
  },
  methods: {
    setActiveComponent(componentName) {
      this.activeComponent = componentName;
    },
  },
};
</script>

<style scoped>

.el-col.centered {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}
 
.common-layout {   
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
  }
  .el-container {   
    height: 100%;    
  }

.layout-container-demo {
  height: 100vh;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
  
  width: 100%;
}

.layout-container-demo .el-header {
  height: 100%;
  height: 60px;
  width: 100%;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  width: 100%;
  width: 200px;
  height: 100%;
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  flex: 1;
  padding: 0;
  background-color: rgb(246, 245, 245);
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.titleImage {
  overflow: hidden; /* 确保子元素不会超出父元素边界 */
  height: auto;
  width: 100%;
  min-width: 120px;
  
}

</style>